<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    table {
        width: 400px;
        height: 50px;
    }

    table,
    tr,
    td {
        margin: 30px auto;
        border: 1px solid rgb(119, 117, 117);
        border-collapse: collapse;
        text-align: center;
    }

    table tr:nth-child(1) {
        background-color: pink;
    }

    h3 {
        text-align: center;
        display: block;
    }
</style>

<body>
    <h3>学生列表</h3>
    <table>
        <tr>
            <td>序号</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
            <td>家乡</td>
        </tr>
        <script>


            let students = [
                {
                    uname: '小明',
                    age: 18,
                    gender: '男',
                    hometown: '河北省',
                },
                {
                    uname: '小红',
                    age: 19,
                    gender: '女',
                    hometown: '河南省',
                },
                {
                    uname: '小刚',
                    age: 17,
                    gender: '男',
                    hometown: '山西省',
                },
                {
                    uname: '小丽',
                    age: 18,
                    gender: '女',
                    hometown: '江西省',
                }
            ]
            for (let k in students) {

                document.write(`
            <tr>
                <td>  ${+k + 1} </td>
                <td>${students[k].uname}</td>
                <td>${students[k].age}</td>
                <td>${students[k].gender}</td>
                <td>${students[k].hometown}</td>
            </tr>
                `)



            }
        </script>
    </table>


</body>

</html>